<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当购物车</title>
    <link rel="stylesheet" href="./css/cart.css">
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div class="container" id="root">
        <div class="logo">
            <img src="./image/dd_logo.jpg" alt="logo"><button @click="onShowHide" class="product-add">添加商品</button>
        </div>
        <!-- 购物车列表组件 -->
        <product-list ref="productList" :product="newProduct" @on-length="getLength"></product-list>
        <div class="cart-add" v-show="isShow">
            <a href="javascript:void(0)" class="close" @click="onShowHide">&times;</a>
            <form @submit.prevent>
                <input type="text" name="name" v-model="product.name" placeholder="请输入商品名称"><br>
                <input type="text" name="price" v-model="product.price" placeholder="请输入商品价格"><br>
                <input type="text" name="num" v-model="product.num" placeholder="请输入商品数量"><br>
                <input type="text" name="url" v-model="product.url" placeholder="请输入商品图片地址"><br>
                <button class="add-btn" @click="onAddProduct">添加商品</button>
            </form>
        </div>
    </div>

    <script>
       const app = Vue.createApp({
            data() {
                return {
                    isShow: false,
                    product: {
                        name: '',
                        price: 0,
                        num: 0,
                        url: '',
                        state:false,
                        singlePrice: 0
                    },
                    newProduct:{},
                    len:0
                }
            },
            methods: {
                onShowHide() {
                    this.isShow = !this.isShow
                },
                onAddProduct() {
                    console.log(this.$refs.productList);
                    this.newProduct = this.product
                    //清空表单内容
                    this.product = {
                        id:this.len,
                        name: '',
                        price: 0,
                        num: 0,
                        url: '',
                        singlePrice: 0
                    }
                    this.onShowHide()
                },
                getLength(len){
                    this.len = len
                }
            }
        })

        app.component('productList',{
            props:['product'],
            data(){
                return{
                    cart: {
                        stateAll: false,
                        cartList: [{
                            id: 1001, //商品序号
                            name: 'js高级编程', //商品名
                            url: 'https://img1.baidu.com/it/u=454394458,1998378568&fm=253&fmt=auto&app=138&f=JPEG', //商品图片
                            price: 68.90, //商品价格
                            num: 0, //商品数量
                            singlePrice: 0, //商品总价=数量*价格    
                            state: false //状态
                        },
                        {
                            id: 1002,
                            name: 'css高级编程',
                            url: 'https://img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
                            price: 55.89,
                            num: 0,
                            singlePrice: 0,
                            state: false //状态
                        },
                        {
                            id: 1003,
                            name: 'html高级编程',
                            url: 'https://img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
                            price: 45.89,
                            num: 0,
                            singlePrice: 0,
                            state: false //状态
                        }
                        ]
                    },
                }
            },
            watch:{
                product(){
                    this.onAddProduct()
                }
            },
            computed: {
                totalPrice() {
                    let { cartList } = this.cart
                    let total = cartList.reduce((s, item) => s += item.state ? Number(item.singlePrice) : 0, 0)
                    return Number(total).toFixed(2)
                }
            },
            methods: {
                onAddProduct() {
                    let product = this.product
                    this.cart.cartList.push(product)
                    let len = this.cart.cartList.length
                    this.$emit('onLength',len)
                },
                onDelete(id) {
                    let { cartList } = this.cart
                    let index = cartList.findIndex(item => item.id === id)
                    cartList.splice(index, 1)
                    this.cart.cartList = cartList
                },
                onCheckAll() {
                    let { stateAll, cartList } = this.cart
                    stateAll = !stateAll
                    cartList.forEach(item => item.state = stateAll)
                    this.cart = { stateAll, cartList }
                },
                onCheckSingle(id) {
                    let { stateAll, cartList } = this.cart
                    let product = cartList.find(item => item.id === id)
                    product.state = !product.state
                    stateAll = cartList.every(item => item.state)
                    this.cart = { stateAll, cartList }
                }
            },
            template:`<div class="cart-list">
                        <table>
                            <tr>
                                <th><input type="checkbox" name="checkall" :checked="cart.stateAll" @click="onCheckAll">全选框</th>
                                <th>序号</th>
                                <th>商品图片</th>
                                <th>商品信息</th>
                                <th>商价</th>
                                <th>数量</th>
                                <th width="100px">总价</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="item in cart.cartList">
                                <td><input type="checkbox" name="checksingle" :checked="item.state" @click="onCheckSingle(item.id)">
                                </td>
                                <td>{{item.id}}</td>
                                <td><img :src="item.url" alt=""></td>
                                <td>{{item.name}}</td>
                                <td>￥{{item.price}}</td>
                                <td><input type="button" name="minus" value="-" :disabled="item.num===0" @click="item.num--"><input
                                        type="text" name="amount" :value="item.num"><input type="button" name="plus" value="+"
                                        @click="item.num++"></td>
                                <td class="single-price">￥{{item.singlePrice = (item.num*item.price).toFixed(2)}}</td>
                                <td> <a href="#">移入收藏</a><br><a href="#" class="del" @click="onDelete(item.id)">删除</a></td>
                            </tr>
                        </table>
                        <h2>商品总价:<span class="total-price">￥{{totalPrice}}</span></h2>
                    </div>`
            
        })

        app.mount('#root')

    </script>
</body>

</html>